<template>
  <div>
    <el-dialog
      :visible.sync="visible"
      title="添加医院"
      width="60%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <span>选择：</span>
          <el-card>
            <el-input placeholder="搜索" v-model="filterText"></el-input>
            <div class="scrollbar">
              <el-scrollbar style="height: 100%">
                <el-tree
                  :data="hostpitalOptionalData"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  ref="tree"
                  highlight-current
                  :props="defaultProps"
                  :filter-node-method="filterNode"
                  @check="handleCheck"
                >
                  <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span>{{ node.label }}【{{ data.id }}】</span>
                  </span>
                </el-tree>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <span>已选：</span>
          <el-card>
            <div class="scrollbar">
              <el-scrollbar style="height: 100%">
                <div v-for="(item, index) in choosedData" :key="index">
                  <span>{{ item.name }}【{{ item.id }}】</span>
                  <i
                    class="el-icon-circle-close"
                    style="float: right"
                    @click="checkNode(item.id)"
                  ></i>
                </div>
              </el-scrollbar>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button class="theme-background-color" @click="saveHospitalData"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    chooseMultiHospitalDialogVisible: {
      type: Boolean,
      default: function () {
        return {}
      }
    },
    hostpitalOptionalData: {
      type: Array,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      visible: this.chooseMultiHospitalDialogVisible,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      filterText: '',
      choosedData: []
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('update:chooseMultiHospitalDialogVisible', false)
          done()
        })
        .catch((_) => {})
    },
    filterNode(value, data) {
      if (!value) return true
      return (data.name + '【' + data.id + '】').indexOf(value) !== -1
    },
    handleCheck(data, checkedObj) {
      // console.log(data, checkedObj)
      this.choosedData = this.$refs.tree.getCheckedNodes(true)
    },
    checkNode(id) {
      this.$refs.tree.setChecked(id, false)
      this.choosedData = this.$refs.tree.getCheckedNodes(true)
    },
    saveHospitalData() {
      this.$emit('showHospitalData', this.choosedData)
      this.visible = false
      this.$emit('update:chooseMultiHospitalDialogVisible', false)
    }
  },
  watch: {
    chooseMultiHospitalDialogVisible() {
      this.visible = this.chooseMultiHospitalDialogVisible
      if (this.visible) {
        this.choosedData = []
      }
    },
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-dialog__footer {
  text-align: center;
  .el-button {
    width: 160px;
  }
}
.scrollbar {
  height: 350px;
  /deep/.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  /deep/.is-horizontal {
    display: none;
  }
  /deep/ .el-card__header {
    padding: 10px 20px;
  }
  .el-card {
    min-width: 90%;
    margin-bottom: 10px;
  }
}
</style>
